<template>
  <div>
    <el-row class="pc">
      <el-col :span="4">
        <div class="logo" @click="$router.push('/')">在线投票平台</div>
      </el-col>
      <el-col :span="16">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          router=""
        >
          <el-menu-item index="/VoteList">投票广场</el-menu-item>
          <el-menu-item index="/PostList">动态广场</el-menu-item>
          <el-menu-item index="/NoticeList">公告列表</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="4">
        <div v-if="!userInfo" class="nav-right">
          <el-button type="primary" plain size="mini" style="margin-right:8px;" @click="$router.push('/login')">登录</el-button>
          <el-button plain size="mini" @click="$router.push('/register')">注册</el-button>
        </div>
        <div v-if="userInfo" class="nav-right" style="font-size:14px;">
          欢迎您，{{ userInfo.nickName }}
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'Nav',
  data() {
    return {
      activeIndex: ''
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.user
    }
  },
  created() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.logo{
  border-bottom: solid 1px #e6e6e6;
  height: 61px;
  line-height: 61px;
  text-align: center;
  cursor: pointer;
}

.nav-right{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 61px;
  border-bottom: solid 1px #e6e6e6;
}

.pc{
  display: block;
}

.mobile{
  display: none;
}

@media screen and (max-width: 600px) {
    .pc {
        display: none;
    }
    .mobile{
      display: block;
    }

    .mobile-title{
      color: #909399;
      font-size: 14px;
      margin-left: 10px;
       height: 61px;
       line-height: 61px;
       border-bottom: solid 1px #e6e6e6;
       color: #409EFF;
    }
}
</style>
